<!--
 * @Descripttion: 
 * @version: 0.0.1
 * @Author: liutaotao
 * @Date: 2021-09-16 11:20:05
 * @LastEditors: liutaotao
 * @LastEditTime: 2021-09-28 10:47:36
-->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./sass/mzscroll.min.css" rel="stylesheet">
    <title>Document</title>
    <style>
      .list {
        padding: 0;
        margin: 0;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
      }

      .item {
        width: calc(100% - 10px);
        margin: 10px auto;
        background-color: blanchedalmond;
        display: block;
        height: 200px;
      }

    </style>
  </head>

  <body>
    <div class="wrapper">
      <ul class="list">
        <li class="item" mz="slide-left">1</li>
        <li class="item" mz="slide-right">2</li>
        <li class="item" mz="slide-left">3</li>
        <li class="item" mz="slide-right">4</li>
        <li class="item" mz="slide-right">5</li>
        <li class="item" mz="slide-left">6</li>
        <li class="item" mz="fade-up-right">7</li>
        <li class="item" mz="slide-right">8</li>
        <li class="item" mz="fade-up-left">9</li>
        <li class="item" mz="slide-right">10</li>
        <li class="item" mz="slide-left">11</li>
        <li class="item" mz="slide-right">12</li>
        <li class="item" mz="slide-left">13</li>
        <li class="item" mz="flip-left">14</li>
        <li class="item" mz="slide-right">15</li>
        <li class="item" mz="slide-left">16</li>
        <li class="item" mz="slide-right">17</li>
        <li class="item" mz="slide-right">18</li>
        <li class="item" mz="slide-right">19</li>
        <li class="item" mz="slide-right">20</li>
        <li class="item" mz="slide-right">21</li>
        <li class="item" mz="slide-right">22</li>
        <li class="item" mz="slide-right">23</li>
        <li class="item" mz="slide-right">24</li>
        <li class="item" mz="slide-right">25</li>
        <li class="item" mz="slide-right">26</li>
        <li class="item" mz="slide-right">27</li>
        <li class="item" mz="slide-right">28</li>
        <li class="item" mz="slide-right">29</li>
        <li class="item" mz="slide-right">30</li>
        <li class="item" mz="slide-right">31</li>
        <li class="item" mz="slide-right">32</li>
        <li class="item" mz="slide-right">33</li>
        <li class="item" mz="slide-right">34</li>
        <li class="item" mz="slide-right">35</li>
        <li class="item" mz="slide-right">36</li>
        <li class="item" mz="slide-right">37</li>
        <li class="item" mz="slide-right">38</li>
        <li class="item" mz="slide-right">39</li>
        <li class="item" mz="slide-right">40</li>
      </ul>
    </div>
    <script src="./dist/MZScroll.js"></script>
    <script>
      new MZScroll({
        el: '.list',
        topDistance: 50,
        bottomDistance: 0
      });
    </script>
  </body>

</html>
